<cly-datatable-n
    :force-loading="loading"
    :rows="widgets"
    :exportFormat="formatExportFunction"
    :persist-key="persistKey"
    :available-dynamic-cols="tableDynamicCols"
    width="100%">
      <template v-slot="scope">
          <el-table-column width="100" fixed type="switch" sortable="true" prop="status" :label="i18n('feedback.status')">
              <template v-slot="rowScope">
                <el-switch :value="rowScope.row.status"
                  :disabled="!canUserUpdate"
                  @input="scope.patch(rowScope.row, { status: !rowScope.row.status})"
                  @change="$emit('set-status', rowScope.row, !rowScope.row.status)">
                </el-switch>
              </template>
          </el-table-column>
          <el-table-column min-width="300" prop="popup_header_text" fixed :label="i18n('feedback.ratings-widget-name')">
            <template v-slot="rowScope">
              <div v-html="rowScope.row.popup_header_text" @click="goWidgetDetail(rowScope.row._id)" :class="[rowScope.row.hover && 'bu-is-underlined bu-is-clickable color-primary', 'color-dark-blue-100 text-medium']">
                </div>
                <div>
                  <span class="color-cool-gray-40 text-small bu-has-text-weight-semibold"> {{ i18n('feedback.widget-id') }} </span>
                  <span class="color-cool-gray-40 text-small">{{rowScope.row._id}}</span>
                </div>
            </template>
          </el-table-column>
          <el-table-column min-width="150" v-if="cohortsEnabled" prop="targeting" :label="i18n('feedback.targeting')">
            <template v-slot="rowScope">
              <cly-cohort-targeting inline :targeting="rowScope.row.targeting">
              </cly-cohort-targeting>
            </template>
          </el-table-column>
          <el-table-column min-width="150" sortable="true" prop="rating_score" column-key="ratingScore" :label="i18n('feedback.rating-score')">
            <template v-slot="rowScope" class="bu-is-flex bu-is-justify-content-center">
                <span class="bu-is-size-4">
                  {{ rowScope.row.ratingScore }}
                </span>
            </template>
          </el-table-column>
          <el-table-column min-width="130" sortable="true" prop="responses" column-key="ratingsCount" :label="i18n('feedback.responses')">
            <template v-slot="rowScope" class="bu-is-flex bu-is-justify-content-center">
              <span class="text-medium">
                {{ rowScope.row.ratingsCount }}
              </span>
            </template>
          </el-table-column>
          <template v-for="(col,idx) in scope.dynamicCols" :prop="col.value">
            <el-table-column v-if="col.value === 'target_pages'" :key="idx" 
             min-width="120" sortable="true" prop="target_pages" :label="col.label">
              <template v-slot="rowScope" class="bu-is-flex bu-is-justify-content-center">
                <span class="text-medium">
                  {{ rowScope.row.target_pages }}
                </span>
              </template>
            </el-table-column>
          </template>
      </template>
  </cly-datatable-n>